<html>
  <head>
    <title>Vue语法</title>
  </head>
  <body>
    <script>
      // Vue 语法

          /*
              一、vue相比传统js的开发优势

                      在传统开发中，用原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。

                      vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 DOM ，这样大大加快了访问速度和提升用户体验。
          */

          /*
              二、文件类型变化

                     以前是.html文件，开发也是html，运行也是html。
                     
                     现在是.vue文件，开发是vue，经过编译后，运行时已经变成了js文件。

                     现代前端开发，很少直接使用HTML，基本都是开发、编译、运行。
                     
                     所以 uni-app 有编译器、运行时的概念
          */

          /*
              三、文件内代码架构的变化

                    以前一个 html 大节点，里面有 script 和 style 节点：

                           <!DOCTYPE html>
                          <html>
                            <head>
                              <meta charset="utf-8" />
                              <title></title>
                              <、script type="text/javascript">
                              </、script>
                              <style type="text/css">
                              </style>
                            </head>
                            <body>
                            </body>
                          </html>

                    现在 template 是一级节点，用于写tag组件， script 和 style 是并列的一级节点，
                    
                    也就是有3个一级节点。这个叫vue单文件组件规范sfc。

                            <template>
                                    <view>
                                    注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。
                                    </view>
                            </template>
                            <、script>
                                  export default {
                                  }
                            </、script>
                            <style>
                            </style>
          */

          /*
              四、外部文件引用方式变化

                      以前通过script src、link href引入外部的js和css；
                      
                            <、script src="js/jquery-1.10.2.js" type="text/javascript"></、script>
	                          <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

                      现在是es6的写法， import 引入外部的js模块(注意不是文件)或css；

                   ★、js文件要 require 进来，变成了对象。

                          在hello uni-app的 common 目录有一个工具类 util.js ，可以在hello uni-app中搜索这个例子查看。
                          
                          hello uni-app示例代码可从 github 获取。

                                <、script>
                                      var util = require('../../../common/util.js');  //require这个js模块
                                      var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
                                </、script>

                          而在这个util.js里，要把之前function 封装为对象的方法

                                  function formatTime(time) {
                                    return time;//这里没写逻辑
                                  }
                                  module.exports = {
                                    formatTime: formatTime
                                  }

                  ★、css外部文件导入。

                            全局样式，在根目录下的 app.vue里写入，每个页面都会加载 app.vue 里的样式。

                                      <style>
                                        @import "./common/uni.css";
                                        .uni-hello-text{
                                          color:#7A7E83;
                                        }
                                      </style>

                          另外，vue支持组件导入，可以更方便的封装一个包括界面、js、样式的库。

          */

          /*
              五、组件/标签的变化

                      以前是 html　标签，比如　<div> ,现在是小程序组件，比如 <view>.

                      那么标签和组件有什么区别，不都是用尖括号包围起来的一段英文吗？

                        ①、其实便签是老的概念，标签属于浏览器内置的东西。

                        ②、但组件，是可以自由扩展的。类似你可以把一段js封装成函数或模块，你也可以把一个ui控件封装成一个组件。
          */

          /*
              六、js的变化

                   1、以前的DOM操作

                        以前的DOM操作，如果你想改变某个DOM元素的显示内容，比如一个view的显示文字： 给 view 设id，

                        然后js 里通过选择器获取DOM元素，进一步通过js进行赋值操作，修改DOM元素的属性或值。

                   2、现在的做法

                        现在的做法是vue的绑定式模式，给这个DOM元素绑定一个js变量，在script中修改js变量的值，DOM会自动变化，

                        页面会自动更新渲染。
          */

          
          /*
              六、在uni-app 中使用差异

                          uni-app 在发布到H5 时支持所有vue的语法；

                          发布到App 和 小程序时，由于平台限制，无法实现全部vue语法，但 uni-app仍然是对vue语法支持度最高的跨端框架。

                          相比web平台，Vue.js  在 uni-app 中使用差异主要集中在两个方面：
                          
                              新增：uni-app 除了支持 Vue 实例的"组件生命周期"，还拥有"应用生命周期"及 "页面的生命周期"。

                              受限：相比 Web 平台，在小程序和 App 端部分功能支持不完善，具体见兼容性列表

                          
          */
    </script>
  </body>
</html>